<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_全屏遮罩</title>
    <style>
        .mask{
            background-color:rgba(0,0,0,.3) ;
            position: fixed;
            top:0;
            right:0;
            left:0;
            bottom:0;

        }
    </style>
</head>
<body>
<div class="mask"></div>
<div class="main">
    内容<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolor, expedita! Aliquam dignissimos
        distinctio dolore dolorem facilis impedit, inventore minima necessitatibus nostrum odit officia omnis, possimus
        praesentium quisquam sit totam!
    </div>
    <div>Accusantium adipisci alias, aspernatur beatae ea eaque enim eum fugit ipsam iure libero minima molestias nisi
        nobis omnis perspiciatis praesentium quasi quibusdam quisquam, sed, similique soluta tempora voluptas! Eum,
        sequi.
    </div>
    <div>Ab cupiditate eligendi eum, ex facilis illum, itaque iure maxime necessitatibus nesciunt nulla quas repudiandae
        saepe voluptate voluptatibus? Accusantium at dolore esse et harum molestias, neque nesciunt possimus repellendus
        voluptate.
    </div>
    <div>Ad alias asperiores consectetur delectus distinctio dolor dolores earum eos expedita, facere facilis fugiat
        illum ipsam iure nam necessitatibus neque nesciunt odit omnis praesentium quaerat quas quasi, sed totam vero.
    </div>
    <div>Animi debitis dicta eaque eos impedit necessitatibus nostrum quam repudiandae tempore ut! Architecto, assumenda
        cumque ea est eveniet itaque, minima molestiae neque non praesentium quaerat quia, ratione sapiente vero
        voluptate?
    </div>
    <div>Ab esse impedit optio reprehenderit suscipit tempore velit? A accusantium ducimus magni, neque praesentium
        reiciendis sapiente? At culpa cumque doloribus earum eius eligendi labore laboriosam omnis, pariatur quasi
        tempore voluptatem.
    </div>
    <div>Asperiores id inventore ipsam repellat saepe veritatis. Assumenda aut dolores ducimus eaque earum eveniet
        excepturi, facilis iure labore, laboriosam laborum odio odit, provident quae sapiente soluta velit vero
        voluptatibus voluptatum?
    </div>
    <div>A cupiditate doloribus eos est illo iure neque numquam pariatur quam unde! Ducimus est eveniet placeat ullam?
        Expedita quis, unde? Consequatur distinctio eveniet minima mollitia, nam quasi sunt suscipit voluptas?
    </div>
    <div>Animi corporis facere nulla possimus quasi. Atque beatae deleniti libero quidem quo quod rem tempora
        voluptatem? Aliquam asperiores cumque eos officiis? Aperiam consequatur delectus dicta expedita minus, saepe
        sequi soluta!
    </div>
    <div>Accusantium aspernatur assumenda consequuntur, doloribus error et excepturi ipsum, maxime minima nihil numquam
        optio provident rem tempore temporibus veniam voluptatibus? Beatae dolore molestiae non nostrum placeat repellat
        repellendus voluptas, voluptatum?
    </div>
    <div>Assumenda autem blanditiis fugit impedit iure magni quasi. Architecto aut eaque esse eum ex impedit incidunt
        ipsum magni nihil nisi, odit officiis pariatur, possimus quibusdam reprehenderit suscipit voluptas voluptate
        voluptatum.
    </div>
    <div>Alias atque, consequuntur dignissimos eius illo incidunt ipsam non sit tempore temporibus unde vero voluptas
        voluptate. Aliquid dolorem eos ipsum omnis vel? Doloribus harum id, nesciunt possimus provident quibusdam
        reprehenderit?
    </div>
    <div>Consequatur culpa dicta dolor illo in inventore ipsa iste labore, magni nihil officiis quae quam quidem sequi
        soluta tenetur voluptatum? Ab aliquid beatae ea eaque facere fugit ullam ut vero!
    </div>
    <div>Accusamus assumenda dignissimos dolorum eaque fuga placeat sit tempora. A aut debitis doloremque eius eos et
        facilis impedit laborum quaerat qui quibusdam quos tenetur totam velit veritatis, voluptas voluptates
        voluptatum.
    </div>
    <div>Animi dolore enim facilis ipsum, itaque libero maxime neque sint soluta vero! Ad aliquid atque culpa et
        exercitationem expedita facilis natus, pariatur possimus praesentium quasi qui repellendus, tempore totam
        voluptatibus!
    </div>
    <div>Architecto eveniet hic, in laudantium nesciunt quam repudiandae vel! Alias, corporis culpa doloremque eius
        fugiat ipsa mollitia, nostrum placeat quas quis ratione voluptate voluptatum! Ex neque nisi omnis quasi sequi.
    </div>
    <div>Accusantium ad beatae blanditiis cum error esse exercitationem facere fugiat iure laboriosam maiores molestias
        numquam, obcaecati officia officiis placeat, porro quaerat quisquam quos rem repellat reprehenderit repudiandae
        sint voluptas voluptatem.
    </div>
    <div>Dignissimos in maxime rem veniam. Adipisci, assumenda dignissimos doloremque exercitationem fugit incidunt
        ipsam magnam officia, officiis sed voluptates voluptatibus. Commodi consequuntur eius laudantium nam praesentium
        qui reiciendis tempore ut voluptatum?
    </div>
    <div>Accusamus aperiam hic in labore quo totam ullam. Alias atque corporis cum distinctio harum iure maxime mollitia
        nobis obcaecati, odit omnis perferendis tempore voluptas voluptate voluptatem. Delectus harum ipsa veniam!
    </div>
    <div>Eaque eos excepturi exercitationem explicabo facere harum ipsum molestiae nesciunt nisi nobis quam quos
        tempora, totam? Eum expedita odit repellat sequi voluptas. Aliquam aliquid deleniti ea, minima nulla veniam
        voluptas.
    </div></div>
</div>
</body>
</html>